import { Button, Divider, Space } from '@douyinfe/semi-ui'
import Title from '@douyinfe/semi-ui/lib/es/typography/title'

export const colorList = [
  'blue',
  'amber',
  'cyan',
  'green',
  'indigo',
  'light-blue',
  'light-green',
  'lime',
  'orange',
  'pink',
  'purple',
  'red',
  'teal',
  'violet',
  'yellow',
]

export default function setting() {
  return (
    <div className="m-l-r-20 m-t-10">
      <Divider align="left">
        <Title style={{ margin: '8px 0' }}>主题设置</Title>
      </Divider>
      <Space className="m-t-10">
        <Button>示例</Button>
        <Divider layout="vertical" />
        {colorList.map((item, index) => (
          <Button
            key={index}
            onClick={() => {
              changeTheme(item)
            }}
          >
            <span style={{ color: `rgba(var(--semi-${item}-5), 1)` }}>
              {item === 'blue' ? `${item}（默认）` : item}
            </span>
          </Button>
        ))}
      </Space>
    </div>
  )
}

// 切换主题
function changeTheme(color: string) {
  const body = document.body

  body.style.setProperty(
    '--semi-color-primary',
    `rgba(var(--semi-${color}-5), 1)`
  )
  body.style.setProperty(
    '--semi-color-primary-hover',
    `rgba(var(--semi-${color}-6), 1)`
  )
  body.style.setProperty(
    '--semi-color-primary-active',
    `rgba(var(--semi-${color}-7), 1)`
  )
  body.style.setProperty(
    '--semi-color-primary-disabled',
    `rgba(var(--semi-${color}-2), 1)`
  )
  body.style.setProperty(
    '--semi-color-primary-light-default',
    `rgba(var(--semi-${color}-0), 1)`
  )
  body.style.setProperty(
    '--semi-color-primary-light-hover',
    `rgba(var(--semi-${color}-1), 1)`
  )
  body.style.setProperty(
    '--semi-color-primary-light-active',
    `rgba(var(--semi-${color}-2), 1)`
  )

  body.style.setProperty('--semi-color-link', `rgba(var(--semi-${color}-5), 1)`)
  body.style.setProperty(
    '--semi-color-link-hover',
    `rgba(var(--semi-${color}-6), 1)`
  )
  body.style.setProperty(
    '--semi-color-link-active',
    `rgba(var(--semi-${color}-7), 1)`
  )
  body.style.setProperty(
    '--semi-color-link-visited',
    `rgba(var(--semi-${color}-5), 1)`
  )
}
